<script>
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	const progress = tweened(0, {
		duration: 400,
		easing: cubicOut
	});
</script>

<div class="grid items-center w-full gap-5 p-5 my-5 text-pink-600 bg-gray-100 rounded-lg">
	<div class="mt-2 bg-gray-400 rounded-full shadow-inner">
		<!-- <div
      class="text-center rounded-full shadow-inner"
      style="width:{$progress * 100}%; background: linear-gradient(45deg,#1fe6ff,#673AB7)"> -->
		<div
			class="text-center transition duration-500 ease-in-out rounded-full shadow-inner opacity-75"
			style="width:{$progress * 100}%; background: linear-gradient(45deg,#ffee54,#33ff00,#ff00ca)"
		>
			<div class="inline-block h-full px-2 font-bold text-white bg-purple-700 rounded-full">
				{$progress * 100}%
			</div>
		</div>
	</div>
	<meter value={$progress} class="w-auto text-purple-700" />
	<progress
		value={$progress}
		class="inline-block w-full text-sm text-white bg-purple-700 rounded-full"
	/>
	<div class="grid justify-around w-full grid-flow-col gap-10">
		<button class="btn-blue btn" on:click={() => progress.set(0)}>0%</button>

		<button class="btn-blue btn" on:click={() => progress.set(0.25)}> 25% </button>

		<button class="btn-blue btn" on:click={() => progress.set(0.5)}>50%</button>

		<button class="btn-blue btn" on:click={() => progress.set(0.75)}> 75% </button>

		<button class="btn-gray btn" on:click={() => progress.set(1)}>100%</button>
	</div>
</div>

<style>
	.btn {
		@apply font-bold py-2 px-4 rounded;
	}

	.btn-blue {
		@apply bg-blue-500 text-white;
	}
	.btn-blue:hover {
		@apply bg-green-700;
	}

	.btn-gray {
		@apply bg-gray-400 text-gray-800;
	}
	.btn-gray:hover {
		@apply bg-gray-500;
	}
</style>
